<template>
  <div class="googleBinding" >
    <!--谷歌验证码-->
    <div class="googleTitle">{{lang['installationInstructions']}}：</div>
    <div class="left">
      <div class="downApp">
        <h3><em>1</em>{{lang['download the chorus validator APP']}}</h3>
        <div class="words">
          <p>{{lang['iOS user logs on to App']}}</p>
          <p>{{lang['android users log in to App Store']}}</p>
        </div>
        <div class="down">
          <a><img src="../images/googleAppkle.png">App Store</a>
          <a><img src="../images/googlePlay.png">Google play</a>
        </div>
      </div>

      <div class="addKey">
        <h3><em>2</em>{{lang['add a key to Google validator and back up']}}</h3>
        <div class="words">
          <p>{{lang['open Google Authenticator']}}</p>
          <p class="red">{{lang['be sure to save the following key backup before binding']}}</p>
        </div>
        <div class="two_dimension_code" width="98" height="98">
          <img :src="googlekey.Data.Url">
          <div class="key">
            {{lang['cipherCode']}}
            <p>
              <input :value="googlekey.Data.Key" id="googlekeyKey">
              <a class="copy" @click="duplicate">{{lang['duplicate']}}</a></p>
              {{lang['if you cant scan a QR code'].replace('{length}', (googlekey.Data.Key && googlekey.Data.Key.length) || 0)}}
          </div>
        </div>
      </div>
    </div>

    <div class="list">
      <h3><em>3</em>{{lang['openGoogle']}}</h3>
      <ul>
        <li>
          <label>{{lang.basic_capitalPassword}}</label>
          <input type="password" name="" value="" v-model="googletpwd" :placeholder="lang['pleaseEnterAFundPassword']">
        </li>
        <li>
          <label>{{lang.loginCodeGoogle}}</label>
          <input type="password" name="" value="" v-model="googlepin" :placeholder="lang['PleaseGoogleCode']">
        </li>
        <li>
          <button type="button" class="submitBtn" v-bind:class="{ active: !isSubmitBtnCheck }"  @click="googleShow"> {{lang.openGoogle}}
          </button>
        </li>
      </ul>
    </div>
    <!-- 弹窗 提示-->
    <SwModal :isShow.sync="showModal" modalClass="userModal smallModal" :isShowBg="true" :isCloseOnClickBg="true" :onClosed="onClosed" :okText="lang.determineBth" :ok="googleBtndetermine">
      <div class="successfulOperation">
        <img src="../images/google_certification02.png">
        <p>{{lang['successfulOpenGoogle']}}</p>
      </div>
    </SwModal>

  </div>
</template>
<script>
import SwModal from '@/components/SwModal'
import ModalApi from '@/components/SwModal/api.js'

export default {
  props: [
    'lang',
    'langKey'
  ],
  data () {
    return {
      showModal: false,
      googletpwd: '',
      googlepin: '',
      googlekey: {Data: {}},
      isSubmitBtnCheck: true
    }
  },
  components: {
    SwModal
  },
  methods: {
    duplicate () {
      var Url2 = document.getElementById('googlekeyKey')
      Url2.select()
      document.execCommand('Copy')
      ModalApi.message(this.lang['copy success'], '', '', 'userModal')
    },
    eventshow (ev) {
      if (ev.keyCode === 13) {
        this.googleShow()
      }
    },
    googleShow () {
      if (!this.isSubmitBtnCheck) { return }

      if (!this.googletpwd) {
        ModalApi.message(this.lang['pleaseEnterAFundPassword'], '', '', 'userModal') // '请输入PIN
        return
      }

      if (!this.googlepin) {
        ModalApi.message(this.lang['PleaseGoogleCode'], '', '', 'userModal') // '请输入谷歌验证码'
        return
      }

      this.isSubmitBtnCheck = false
      this.$http.post('Security/BindGoogleTFAAuthentic', {
        pin: this.googlepin,
        tpwd: this.googletpwd
      }, {
        modalOptions: {
          modalClass: 'userModal'
        }
      })
      .then((res) => {
        if (res.StatusCode === '200') {
          this.googlepin = ''
          this.googletpwd = ''
          this.showModal = !this.showModal
        }
        this.isSubmitBtnCheck = true
      })
    },
    googleBtndetermine () {
      this.showModal = false
      this.$emit('GetCustomerList')
    },
    onClosed () {

    }
  },
  mounted () {
    this.$http.post('Security/GetGoogleTFA', {

    }, {
      modalOptions: {
        modalClass: 'userModal'
      }
    }).then((res) => {
      if (res.StatusCode === '200') {
        this.googlekey = res
      }
    })
  }
}
</script>

<style lang="less">
.googleBinding {
  overflow: hidden;
  background: #1A1F2B;

  h3 {
    padding: 20px 0;
    line-height: 16px;
    color: #fff;
    font-size: 12px;

    em {
      display: inline-block;
      margin-right: 10px;
      width: 16px;
      height: 16px;
      line-height: 16px;
      border: solid 1px #fff;
      border-radius: 16px;
      color: #fff;
      font-size: 12px;
      text-align: center;
    }
  }
  .googleTitle{
    line-height: 56px;
    border-bottom: solid 1px #202832;
    text-indent: 20px;
    color: #fff;
    font-size: 14px;
  }

  .left{
    float: left;
    width: 492px;
    padding: 0 16px 20px;
    border-right: solid 1px #202832;

    .downApp{
      padding-bottom: 20px;
      border-bottom: solid 1px #202832;
      .down{
        margin-top: 20px;
        a{
          display: inline-block;
          margin: 0 15px;
          width: 120px;
          height: 32px;
          line-height: 32px;
          background: #3782FF;
          border-radius: 4px;
          text-align: center;
          color: #fff;

          img{
            padding-right: 5px;
            vertical-align: middle;
          }
        }
      }
    }

    .two_dimension_code {
      position: relative;
      color: #fff;
      font-size: 12px;

      img{
        position: absolute;
        left: 0;
        width: 98px;
        height: 98px;
      }

      .key{
        margin-left: 112px;

        p {
          position: relative;
          margin:8px 0;
          padding: 0 10px;
          height: 50px;
          line-height: 50px;
          background: rgba(56,63,81,0.5);

          input {
            width: 80%;
            background: none;
            color: #fff;
            font-size: 14px;
          }

          a{
            float: right;
            font-size: 12px;
            color: #3782FF;

          }
        }
      }
    }

    .words{
      p{
        margin-bottom: 10px;
        font-size: 12px;
        color: #FFFFFF;
        &.red {
          color: #DE2D2C;
        }
      }
    }
  }

  .list {
    float: left;
    padding: 0 16px;
    width: 413px;
    margin: 0 auto;

    h3{
      padding-top: 52px;
    }

    li {
      position: relative;
      width: 100%;

      label {
        display: block;
        padding: 15px 10px 5px;
        height: 20px;
        line-height: 20px;
        color: #fff;
      }
      input {
        padding: 0 10px;
        height: 40px;
        line-height: 40px;
        background: #2A3440;
        border-radius: 2px;
        width: 100%;
        box-sizing: border-box;
        color: #fff;
      }

      .inptnumber {
        background: #f3f8fd;
        color: #213763;
        border: none;
        text-align: center;
      }
      .submitBtn {
        width: 50%;
        margin:40px auto;
        display: block;
        height: 40px;
        line-height: 40px;
        text-align: center;
        background: #3782FF;
        color: #fff;
        border-radius: 4px;
        font-size: 12px;
        cursor: pointer;

        &.active{
          background-color: #2A3441;
          cursor:not-allowed;
        }
      }
    }
  }
}

@media screen and (max-width:1200px){
  .googleBinding .left,
  .googleBinding .list {
    width: auto;
    padding: 0 20px;
    border: 0;
    float: none;
  }
}
</style>
